<!--
 /**
 * Author: hongChengHao
 * Date: 2022-07-21 11:44
 * Desc: FilmCard 影票订单卡
 */
-->
<template>
  <view class="film-card">
    <view class="film-card__hearder">
      <view class="film-card__one">
        <view>
          <text class="film-card__filmname">{{ obj.filmName || '--' }}</text>
          <text class="fs24">{{ obj.copyType || '--' }}</text>
        </view>
        <view v-if="obj.autoTime" class="film-card__label">
          <view class="film-card__icon"></view>
          <u-count-down
            format="mm:ss"
            :time="obj.autoTime * 1000"
            @finish="onBack"
            @change="onChange"
          >
            <text style="color: #f8a82d"
              >{{
                timeData.minutes > 10
                  ? timeData.minutes
                  : '0' + timeData.minutes
              }}:{{
                timeData.seconds > 10
                  ? timeData.seconds
                  : '0' + timeData.seconds
              }}</text
            >
          </u-count-down>
        </view>
      </view>
      <view class="mb15">{{ obj.hallName || '--' }}</view>
      <view class="film-card__three">
        <view class="film-card__info">
          <view>
            <text class="film-card__time"> {{ obj.sTime || '--' }}</text>
            <text>开场</text>
          </view>
          <view class="film-card__img"></view>
          <view>
            <text class="film-card__time">{{ obj.eTime || '--' }}</text>
            <text>散场</text>
          </view>
        </view>
        <view> {{ dateFmt(obj.eDate, 'M月DD日') }}</view>
        <view class="mt10">
          <text>{{ obj.seatDescribe || '--' }}</text>
        </view>
      </view>
    </view>
    <view class="film-card__footer">
      <view class="film-card__pay" @click="onPay">立即支付</view>
      <view class="film-card__cancel" @click="onCancel">取消订单</view>
    </view>
  </view>
</template>
<script>
  import { dateFmt } from '@/utils/index.ts'
  import { showModal, loading, toast, hideLoading } from '@/utils/message.ts'
  export default {
    name: 'film-card',
    props: {
      obj: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    data() {
      return {
        dateFmt,
        timeData: {}
      }
    },
    methods: {
      countOver() {
        this.onBack()
      },
      // 取消订单
      onCancel() {
        showModal('确定要取消该订单').then(() => {
          loading()
          const data = { orderId: this.obj.orderId }

          uni.$api.orderFilm.unLockSeat(data).then(() => {
            hideLoading()
            this.onBack()
            toast('操作成功')
          })
        })
      },

      onPay() {
        const query = {
          orderId: this.obj.orderId
        }
        this.$tools.navigateTo('/pagesOrder/sureOrder/index', query)
      },
      onBack() {
        this.$emit('cutDown')
      },
      onChange(e) {
        this.timeData = e
      }
    }
  }
</script>
<style lang="scss" scoped>
  /deep/.u-count-down__text {
    color: #f8a82d;
  }
  .film-card {
    margin-top: 15upx;
    width: 670upx;
    background: #ffffff;
    box-shadow: 0upx 6upx 16upx 0upx rgba(108, 108, 108, 0.1);
    border-radius: 20upx;
    font-size: 22upx;
    color: #888888;
    &__hearder {
      padding: 30upx 0upx 0upx 30upx;
    }

    &__one {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    &__filmname {
      font-size: 28upx;
      font-weight: bold;
      color: #333333;
      margin-right: 17upx;
    }

    &__label {
      padding: 8upx 14upx;
      display: flex;
      align-items: center;
      background: #fdf7d7;
      border-radius: 21upx 0 0 21upx;
    }
    &__icon {
      display: inline-block;
      margin-right: 9upx;
      width: 26upx;
      height: 26upx;
      background: url(https://public-oss-file.zmaxfilm.com/applet/img/my/icon-time.png)
        no-repeat;
      background-size: 100%;
    }

    &__three {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      letter-spacing: 2upx;
    }
    &__info {
      margin-bottom: 25upx;
      display: flex;
      align-items: center;
    }
    &__time {
      margin-right: 7upx;
      font-size: 32upx;
      font-weight: bold;
      color: #333333;
    }
    &__img {
      margin: 0 16upx;
      width: 55upx;
      height: 8upx;
      background: url(https://public-oss-file.zmaxfilm.com/applet/img/my/icon-rightArrow.png)
        no-repeat;
      background-size: 100%;
    }
    &__footer {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 34upx;
      padding: 0 23upx;
      height: 80upx;
      border-top: 1upx solid #efefef;
    }
    &__pay {
      display: inline-block;
      margin-left: 240upx;
      font-size: 28upx;
      color: #3bc5d2;
    }
    &__cancel {
      display: inline-block;
      margin-left: 120upx;
    }
  }
</style>
